diff --git a/src/components/wiki-captcha-js/wiki-api.dto.ts b/src/components/wiki-captcha-js/wiki-api.dto.ts index e7deaee..ebb4d08 100644 --- a/src/components/wiki-captcha-js/wiki-api.dto.ts +++ b/src/components/wiki-captcha-js/wiki-api.dto.ts @@ -1,28 +1,32 @@ export class WikiApiDto { public sessionId: string; public questionList: QuestionDto[]; } export class QuestionDto { public questionText: string; public questionId: string; public questionType: QUESTION_TYPES; public answersAvailable: AnswerDto[]; } export class AnswerDto { public imgUrl: string; public text: string; public userAnswer: UserAnswerDto; } export class UserAnswerDto { public userInput: string; public selected: boolean = false; } +export class UserAnswersResponseDto { + public human: boolean; +} + export enum QUESTION_TYPES { IMAGE = 'IMG', FREE_TEXT = 'INPUT', OPTIONS = 'OPTIONS' } diff --git a/src/components/wiki-captcha-js/wiki-captcha-js.css b/src/components/wiki-captcha-js/wiki-captcha-js.css index bd89dc4..2352291 100644 --- a/src/components/wiki-captcha-js/wiki-captcha-js.css +++ b/src/components/wiki-captcha-js/wiki-captcha-js.css @@ -1,100 +1,121 @@ :host { font-family: sans-serif; border: 2px solid var(--color-primary, black); margin: 2rem; padding: 1rem; display: block; max-width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.26); border-radius: 3px; width: 20rem; overflow: hidden; } .wiki-captcha-box { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; max-width: 100%; padding-left: 1rem; padding-right: 1rem; } .wiki-captcha-img-container { display: flex; flex-wrap: wrap; width: 15rem; max-width: 100%; justify-content: center; border-radius: 3px; overflow: hidden; align-self: center; border: 2px solid var(--color-primary, black); box-shadow: 0 2px 8px rgba(0,0,0,.26); } .wiki-captcha-img, .wiki-captcha-img-selected { - width: 4rem; + width: 100%; height: 6rem; flex: 1 0 30%; /* 3 images per row */ - cursor: pointer; } -.wiki-captcha-img-selected { - outline: 4px solid var(--color-primary-img-highlight, black); - width: 4rem; +.wiki-captcha-img-overlay { + display: inline-block; + position: relative; + width: 33.3%; height: 6rem; - outline-offset: -4px; + z-index: 1; + cursor: pointer; +} + +.wiki-captcha-img-overlay-on:after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(117, 1, 117, 0.5); +} + +.wiki-captcha-img-overlay-off:after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(117, 1, 117, 0.0); } .wiki-captcha-footer { display: flex; align-items: center; padding-top: .5rem; } .wiki-captcha-powered-by { display: flex; justify-content: flex-end; padding-top: .5rem; } .wiki-captcha-powered-by-icon { max-width: 20%; } .wiki-captcha-submit { } button, button:focus { outline: none; } button { font: inherit; padding: 0.25rem 0.5rem; border: 1px solid var(--color-primary, black); background: var(--color-primary, black); color: var(--color-primary-inverse, white); cursor: pointer; } button:hover, button:active { background: var(--color-primary-highlight, grey); border-color: var(--color-primary-highlight, grey); } button:disabled { background: #ccc; border-color: #ccc; color: white; cursor: not-allowed; } p { align-self: center; } diff --git a/src/components/wiki-captcha-js/wiki-captcha-js.tsx b/src/components/wiki-captcha-js/wiki-captcha-js.tsx index fb7a67c..169eb17 100644 --- a/src/components/wiki-captcha-js/wiki-captcha-js.tsx +++ b/src/components/wiki-captcha-js/wiki-captcha-js.tsx @@ -1,125 +1,134 @@ import {Component, State} from '@stencil/core'; -import {AnswerDto, UserAnswerDto, WikiApiDto} from './wiki-api.dto'; +import {AnswerDto, UserAnswerDto, UserAnswersResponseDto, WikiApiDto} from './wiki-api.dto'; @Component({ tag: 'wikidata-captcha-js', styleUrl: './wiki-captcha-js.css', shadow: true }) export class WikiCaptchaJs { private readonly WIKI_DATA_URL = 'http://192.168.1.142:8080'; private readonly WIKI_DATA_ICON = 'https://upload.wikimedia.org/wikipedia/commons/6/66/Wikidata-logo-en.svg'; private readonly IMAGES_PER_CAPTCHA = 9; @State() private questionList: WikiApiDto; @State() private loading = false; componentDidLoad() { this.fetchQuestions(); } render() { let question = null; let questionText = null; let images = null; let htmlContent = null; if (this.questionList && this.questionList.questionList.length > 0) { question = this.questionList.questionList[0]; questionText = question.questionText; const maxImageSize = question.answersAvailable.length < this.IMAGES_PER_CAPTCHA ? question.answersAvailable.length : this.IMAGES_PER_CAPTCHA; images = (question.answersAvailable.slice(0, maxImageSize).map(a => - (possible captcha answer - )) + (
+ possible captcha answer +
)) ); } if (this.loading) { htmlContent = ; } else { htmlContent = [

{questionText}

,
{images}
, ] } return (
{htmlContent}
); } onImageClick(answer: AnswerDto, event: Event) { if (!answer.userAnswer) { answer.userAnswer = new UserAnswerDto(); answer.userAnswer.selected = false; } answer.userAnswer.selected = !answer.userAnswer.selected; - const imgElem = event.target as HTMLImageElement; + const divElement = event.target as HTMLDivElement; if (answer.userAnswer.selected) { - imgElem.classList.add('wiki-captcha-img-selected'); + divElement.classList.remove('wiki-captcha-img-overlay-off'); + divElement.classList.add('wiki-captcha-img-overlay-on'); } else { - imgElem.classList.remove('wiki-captcha-img-selected'); + divElement.classList.remove('wiki-captcha-img-overlay-on'); + divElement.classList.add('wiki-captcha-img-overlay-off'); } - console.log('event', imgElem); } onSubmitCaptchaAnswers() { fetch( this.WIKI_DATA_URL + '/answers', { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(this.questionList) } ) - .then(() => { + .then(res => res.json()) + .then((respParsed) => { this.loading = false; + const response = respParsed as UserAnswersResponseDto; + if (response.human) { + alert('You are a human!'); + } else { + alert('You are NOT a human!'); + } this.fetchQuestions(); }) .catch(err => { console.log(err); this.loading = false; }); } fetchQuestions() { this.loading = true; const requestBody = { 'language': 'en' }; fetch( this.WIKI_DATA_URL + '/questions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(requestBody) } ) .then(res => res.json()) .then(parsedRes => { this.questionList = parsedRes as WikiApiDto; this.loading = false; }) .catch(err => { console.log(err); this.loading = false; }); } }